<!-- 模板 -->
<template>
  <div class="consultant">
      <div class="box">
          <div class="btn">
                <el-form  :inline="true"  :model="params" size="small"  label-width="50px" >
                    <el-form-item label="老师:">
                        <el-input  v-model="params.name" placeholder="输入老师名字"  clearable @clear="search" /> 
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索1</el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="add" >添加</el-button>
                    </span>
                </el-form>
          </div>
          <el-card>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column  label="序号" align="center" type="index" width="60"> </el-table-column>
                <el-table-column prop="name" label="老师姓名" align="center" width="120">
                  <template slot-scope="scope">
                    <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="头像" prop="logo" align="center" width="260">
                    <template slot-scope="scope">
                        <el-image  style="width: 80px;" :src="scope.row.logo"  :preview-src-list="[scope.row.logo]"> </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="inShorContent" label="一句话介绍" align="center" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="beGood" label="擅长" align="center" :show-overflow-tooltip="true"> </el-table-column>
                <!-- <el-table-column prop="content" label="简介" align="center" > </el-table-column> -->
                <el-table-column  label="操作" align="center" width="260">
                    <template slot-scope="scope">
                        <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                        <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <pagination
        v-show="newsTotal >0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getInformationList"
        />
      </div>
      <!-- 添加弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form  label-width="120px" :model="form" :rules="rules" ref="form">
   <el-form-item label="头像" prop="logo">
        <el-upload
        :headers='headers'
        class="avatar-uploader"
        :action="upImage+'/table/upload'"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        >
        <img v-if="form.logo" :src=" form.logo" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    <el-form-item label="老师名字" prop="name">
      <el-input v-model="form.name" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="标签:" prop="label">
              <el-select
                v-model="form.label"
                placeholder="请选择标签"
              >
                <el-option
                  v-for="item in certificationSystems"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="(item.dictCode).toString()"
                >
                </el-option>
              </el-select>
            </el-form-item>
  <el-form-item label="一句话介绍" prop="inShorContent">
    <el-input v-model="form.inShorContent"></el-input>
  </el-form-item>
  <el-form-item label="擅长" prop="beGood">
    <el-input v-model="form.beGood" type="textarea"></el-input>
  </el-form-item>
  <el-form-item label="简介" prop="content">
    <quill-editor 
      v-model="form.content" 
      ref="myQuillEditor" 
      :options="editorOption" >
    </quill-editor>
  </el-form-item>

</el-form>
  <span slot="footer" class="dialog-footer" v-if="showBtn">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
import { getTeacherList,getAdd,getUpdate,getDet,getDsc,} from "@/api/teacher/index";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        tableData:[],
        dialogVisible:false,
        loading:false,
        title:'',
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
        form:{
          label:0,
        },
        rules:{
          logo:[
             { required: true, message: '请添加图片', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入老师名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          label: [
            { required: true, message: '请选择标签', trigger: 'change' }
          ],
          examAnswerList: [
            { required: true, message: '请填写选项', trigger: 'change' }
          ],
        },
        editorOption:{
          modules:{
                toolbar:[
                  ['bold', 'italic', 'underline', 'strike'],
                  [{ 'size': ['small', false, 'large', 'huge'] }],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                  [{ 'color': [] }, { 'background': [] }], 
                  [{ 'direction': 'rtl' }],
                  [{ 'indent': '-1'}, { 'indent': '+1' }],
                ]
            }
        },
        certificationSystems:[],
        showBtn:true,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
//      assessmentLevelFormat(row, column) {
//         return this.selectDictLabel(this.certificationSystems, row.dictLabel);
//      },
// 键值配对
    chakan(row){
      this.showBtn = false
      getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
        }
      })
      this.title = "查看"
      this.dialogVisible = true
    },
// 搜索
    search(){
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getInformationList();
    },
    // 删除文章
    handleDeleteClick(row) {
      const id = row.id ;
      // console.log(id)
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getDet(id);
        })
        .then(() => {
          this.getInformationList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    // 修改按钮
    handleUpdateClick(row){
      this.dialogVisible = true
      this.showBtn = true
      getDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
        }
      })
      this.title = "修改";
    },
    // 提交
    onSubmit(){
    this.$refs["form"].validate(valid => {
      if(valid){
        if (this.form.id != undefined) {
          for (let i = 0; i < this.certificationSystems.length; i++) {
                    if(this.form.label == this.certificationSystems[i].dictCode){
                      this.form.label = this.certificationSystems[i].dictLabel
                    }
                  }
                  getUpdate(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('修改成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                } else {
                  // this.form.logo = 'https://9001rzsxy.oss-cn-beijing.aliyuncs.com' + this.form.logo
                  for (let i = 0; i < this.certificationSystems.length; i++) {
                    if(this.form.label == this.certificationSystems[i].dictCode){
                      this.form.label = this.certificationSystems[i].dictLabel
                    }
                  }
                  // console.log(this.form);
                  getAdd(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('添加成功')
                          this.dialogVisible = false
                          this.getInformationList()
                      }
                  })
                }
      }
        
      });
    },
     // 获取所有
    getInformationList() {
      this.loading = true;
      getTeacherList(this.params).then(res => {
        // console.log(res);
        this.tableData = res.rows;
        this.newsTotal = res.total;
        this.loading = false;
      });
    },
      handleAvatarSuccess(res, file) {
      // console.log(URL.createObjectURL(file.raw));
      this.form.logo ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
      add(){
        this.title = '添加'
          this.form = {
              logo:'',
          }
          this.showBtn = true
          this.dialogVisible = true
      },
      handleClose(){
          this.dialogVisible = false
      },
  },
  created () {
    this.getInformationList()
    this.getDicts("teacher_label").then(response => {
      this.certificationSystems = response.data;
      // console.log(this.certificationSystems);
    });
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin-top: 20px;
    }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>